"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Line,
  BarChart,
  Bar,
  PieChart,
  Pie,
  RadarChart,
  Radar,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
  Area,
  ComposedChart,
} from "recharts"

// 出勤率数据
const attendanceData = [
  { name: "高等数学", value: 90 },
  { name: "自动控制原理", value: 85 },
  { name: "大学物理", value: 88 },
  { name: "机械基础", value: 92 },
  { name: "电气自动化", value: 87 },
  { name: "单片机基础", value: 82 },
  { name: "大学英语", value: 89 },
  { name: "模拟电路", value: 91 },
]

// 专注度数据
const attentionData = [
  { name: "周一", value: 70, participation: 60 },
  { name: "周二", value: 75, participation: 55 },
  { name: "周三", value: 65, participation: 65 },
  { name: "周四", value: 80, participation: 50 },
  { name: "周五", value: 85, participation: 55 },
  { name: "周六", value: 75, participation: 45 },
  { name: "周日", value: 90, participation: 65 },
]

// 内容匹配数据
const contentData = [
  { name: "符合大纲", value: 90 },
  { name: "偏离大纲", value: 10 },
]

// 综合评估数据
const overallData = [
  {
    subject: "出勤率",
    A: 85,
    fullMark: 100,
  },
  {
    subject: "专注度",
    A: 70,
    fullMark: 100,
  },
  {
    subject: "参与度",
    A: 65,
    fullMark: 100,
  },
  {
    subject: "内容匹配",
    A: 90,
    fullMark: 100,
  },
  {
    subject: "教学节奏",
    A: 80,
    fullMark: 100,
  },
]

// 颜色配置
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"]
const RADIAN = Math.PI / 180

// 自定义标签组件
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5
  const x = cx + radius * Math.cos(-midAngle * RADIAN)
  const y = cy + radius * Math.sin(-midAngle * RADIAN)

  return (
    <text x={x} y={y} fill="white" textAnchor={x > cx ? "start" : "end"} dominantBaseline="central">
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  )
}

export function DashboardCharts() {
  const [timeRange, setTimeRange] = useState("month")
  const [animate, setAnimate] = useState(false)

  // 触发动画效果
  useEffect(() => {
    setAnimate(false)
    const timer = setTimeout(() => setAnimate(true), 50)
    return () => clearTimeout(timer)
  }, [timeRange])

  return (
    <Card className="col-span-full">
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <CardTitle>数据可视化</CardTitle>
          <CardDescription>教学评估数据的图形化展示</CardDescription>
        </div>
        <Select value={timeRange} onValueChange={setTimeRange}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="选择时间范围" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="week">本周</SelectItem>
            <SelectItem value="month">本月</SelectItem>
            <SelectItem value="semester">本学期</SelectItem>
            <SelectItem value="year">本年度</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="attendance">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="attendance">出勤率</TabsTrigger>
            <TabsTrigger value="attention">专注度</TabsTrigger>
            <TabsTrigger value="content">内容匹配</TabsTrigger>
            <TabsTrigger value="overall">综合评估</TabsTrigger>
          </TabsList>

          <TabsContent value="attendance" className="pt-4">
            <div className="h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={attendanceData}
                  margin={{
                    top: 20,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis domain={[0, 100]} />
                  <Tooltip formatter={(value) => [`${value}%`, "出勤率"]} />
                  <Legend />
                  <Bar
                    dataKey="value"
                    name="出勤率"
                    fill="#0088FE"
                    animationBegin={0}
                    animationDuration={1500}
                    animationEasing="ease-out"
                    label={{ position: "top", formatter: (value) => `${value}%` }}
                  >
                    {attendanceData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>

          <TabsContent value="attention" className="pt-4">
            <div className="h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <ComposedChart
                  data={attentionData}
                  margin={{
                    top: 20,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis domain={[0, 100]} />
                  <Tooltip formatter={(value) => [`${value}%`]} />
                  <Legend />
                  <defs>
                    <linearGradient id="colorAttention" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#0088FE" stopOpacity={0.8} />
                      <stop offset="95%" stopColor="#0088FE" stopOpacity={0.1} />
                    </linearGradient>
                    <linearGradient id="colorParticipation" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#FF8042" stopOpacity={0.8} />
                      <stop offset="95%" stopColor="#FF8042" stopOpacity={0.1} />
                    </linearGradient>
                  </defs>
                  <Area
                    type="monotone"
                    dataKey="value"
                    name="专注度"
                    stroke="#0088FE"
                    strokeWidth={2}
                    fill="url(#colorAttention)"
                    activeDot={{ r: 8 }}
                    animationBegin={0}
                    animationDuration={1500}
                    animationEasing="ease-out"
                  />
                  <Line
                    type="monotone"
                    dataKey="participation"
                    name="参与度"
                    stroke="#FF8042"
                    strokeWidth={2}
                    strokeDasharray="5 5"
                    dot={{ r: 4 }}
                    activeDot={{ r: 8 }}
                    animationBegin={500}
                    animationDuration={1500}
                    animationEasing="ease-out"
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>

          <TabsContent value="content" className="pt-4">
            <div className="h-[300px] w-full flex">
              <div className="w-1/2 h-full">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={contentData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={renderCustomizedLabel}
                      outerRadius={80}
                      innerRadius={40}
                      fill="#8884d8"
                      dataKey="value"
                      animationBegin={0}
                      animationDuration={1500}
                      animationEasing="ease-out"
                    >
                      {contentData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(value) => [`${value}%`]} />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </div>
              <div className="w-1/2 h-full flex flex-col justify-center">
                <div className="space-y-6">
                  {contentData.map((item, index) => (
                    <div key={index} className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div
                            className="w-3 h-3 rounded-full mr-2"
                            style={{ backgroundColor: COLORS[index % COLORS.length] }}
                          ></div>
                          <span className="text-sm">{item.name}</span>
                        </div>
                        <span className="text-sm font-medium">{item.value}%</span>
                      </div>
                      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                        <div
                          className="h-full transition-all duration-1000 ease-out"
                          style={{
                            width: animate ? `${item.value}%` : "0%",
                            backgroundColor: COLORS[index % COLORS.length],
                          }}
                        ></div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="overall" className="pt-4">
            <div className="h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={overallData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  <Radar
                    name="评估结果"
                    dataKey="A"
                    stroke="#8884d8"
                    fill="#8884d8"
                    fillOpacity={0.6}
                    animationBegin={0}
                    animationDuration={1500}
                    animationEasing="ease-out"
                  />
                  <Legend />
                  <Tooltip formatter={(value) => [`${value}%`]} />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
